import React, { Component } from 'react';
import { Form, Icon, Input, Button, Checkbox, Row, Col, message } from 'antd';
import { REGISTER_REQUEST, REGISTER_FAILURE } from 'actions';
import { connect } from 'react-redux';
import * as globals from 'globals';

message.config({
    duration: globals.message_duration,
});
class SignUpForm extends Component {
  render() {
    const { getFieldDecorator } =  this.props.form;
    return (
      <Form onSubmit={ (event) => {
        event.preventDefault();
        this.props.form.validateFieldsAndScroll((error, values) => {
          if(!error) {
            this.props.dispatch({ type: REGISTER_REQUEST, ...values });
          }
        })
      } }>
        <Form.Item label="用户名" labelCol={{ xs: { span: 24 }, sm: { span: 6 } }} wrapperCol={{ xs: { span: 24 }, sm: { span: 14 } }} hasFeedback>
          {
            getFieldDecorator('username', {
              rules: [{ required: true, message: '请输入用户名' }],
            })(<Input />)
          }
        </Form.Item>
        <Form.Item label="密码" labelCol={{ xs: { span: 24 }, sm: { span: 6 } }} wrapperCol={{ xs: { span: 24 }, sm: { span: 14 } }} hasFeedback>

          {
            getFieldDecorator('password', {
              rules: [{
                required: true,
                message: '请输入密码'
              },
              {
                validator: (rule, value, callback) => {
                  callback();
                }
              }]
            })(<Input type="password" />)
          }
        </Form.Item>
        <Form.Item label="确认密码" labelCol={{ xs: { span: 24 }, sm: { span: 6 } }} wrapperCol={{ xs: { span: 24 }, sm: { span: 14 } }} hasFeedback>
          {
            getFieldDecorator('confirm', {
              rules: [{
                required: true,
                message: '请确认密码'
              },
              {
                validator: (rule, value, callback) => {
                  callback();
                }
              }]
            })(<Input type="password" />)
          }
        </Form.Item>
        <Form.Item label="邮箱" labelCol={{ xs: { span: 24 }, sm: { span: 6 } }} wrapperCol={{ xs: { span: 24 }, sm: { span: 14 } }} hasFeedback>
          {
            getFieldDecorator('email', {
                rules: [{
                  type: 'email', message: '请输入正确的邮箱地址',
                },
                {
                  required: true, message: '请输入邮箱地址'
                }]
            })(<Input />)
          }
        </Form.Item>
        <Form.Item wrapperCol={{ xs: { span: 24 }, sm: { span: 14, offset: 6 } }}>
          <Button type="primary" htmlType="submit">注册</Button>
        </Form.Item>
      </Form>
    );
  }

  componentDidUpdate() {
    if(this.props.data !== null) {
      message.success('注册成功,正在跳转到首页...');
      setTimeout(() => {
        this.props.history.push('/');
      }, globals.message_duration * 1000);
    } else if(this.props.error !== null) {
      message.error('注册失败，' + this.props.error);
      this.props.dispatch({ type: REGISTER_FAILURE, data: null, error: null })
    }
  }
}

const mapStateToProps = (state) => {
  return {
    loading: state.register.loading,
    error: state.register.error,
    data: state.register.data,
  };
}

export default connect(mapStateToProps)(Form.create()(SignUpForm));
